<script setup>
import { ref, watch } from 'vue'
import { RouterView } from 'vue-router'
import Home from './components/Home.vue'
import 'element-plus/theme-chalk/dark/css-vars.css'

const isDark = ref(false)
const toggleTheme = () => {
  const newValue = !isDark.value
  isDark.value = newValue
  if (newValue) {
    document.documentElement.classList.add('dark')
    document.documentElement.setAttribute('data-theme', 'dark')
  } else {
    document.documentElement.classList.remove('dark')
    document.documentElement.removeAttribute('data-theme')
  }
  return newValue
}
</script>

<template>
  <RouterView v-slot="{ Component }">
    <component 
      :is="Component" 
      @update:isDark="toggleTheme"
      :is-dark="isDark"
    />
  </RouterView>
</template>

<style>
:root {
  --bg-color: #ffffff;
  --bg-color-secondary: #f0f2f5;
  --text-color: #213547;
  --text-color-secondary: #606266;
  --primary-color: #3B82F6;
  --border-color: #e4e7ed;
  --card-bg: #ffffff;
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --bg-color-secondary: #242424;
  --text-color: rgba(255, 255, 255, 0.87);
  --text-color-secondary: rgba(255, 255, 255, 0.6);
  --primary-color: #646cff;
  --border-color: #333;
  --card-bg: #242424;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, 
    Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}
</style>
